import React from 'react';
import { Button } from 'antd';
const CodeStyle = {
  background: 'rgba(135,131,120,0.15)',
  color: '#EB5757',
  borderRadius: '3px',
  fontSize: '85%',
  padding: '0.2em 0.4em',
};
const Code = (props: { children: React.ReactNode }) => (
  <code style={CodeStyle}>{props.children}</code>
);
export default function Color() {
  return (
    <div className="bg-white p20 h100p">
      <h2 className="black">文字颜色</h2>
      <div className="text-color">
        标题文字 - #C9C9C9 - <Code>text-color</Code>
      </div>
      <div className="text-color-secondary">
        正文文字1 - #8D8D8D - <Code>text-color-secondary</Code>
      </div>
      <div className="text-color-thirdly">
        正文文字2 - #666 - <Code>text-color-thirdly</Code>
      </div>
      <div className="text-color-extra">
        辅助文字 - #333 - <Code>text-color-extra</Code>
      </div>
      <div className="text-color text-color-hover">
        文字hover - #4D76C1 - <Code>text-color-hover</Code>
      </div>
      <hr />
      <h2 className="black">图标颜色</h2>
      <div className="icon-color">
        图标颜色1 - #C9C9C9 - <Code>icon-color</Code>
      </div>
      <div className="icon-color-secondary">
        图标颜色2 - #8D8D8D - <Code>icon-color-secondary</Code>
      </div>
      <div className="icon-color-thirdly">
        图标颜色3 - #666 - <Code>icon-color-thirdly</Code>
      </div>
      <div className="icon-color icon-color-hover">
        图标hover - #4D76C1 - <Code>icon-color-hover</Code>
      </div>
      <hr />
      <h2 className="black">按钮颜色</h2>
      <div>
        <Button type="primary">按钮1</Button>- background: #4D76C1; color: #fff
        - <Code>type="primary</Code>
      </div>
      <div className="pt20">
        <Button className="btn-secondary">按钮2</Button>- background: #444;
        color: #C9C9C9 - <Code>btn-secondary</Code>
      </div>
      <div className="pt20">
        <Button className="btn-thirdly">按钮3</Button>- background: #666; color:
        #C9C9C9 - <Code>btn-thirdly</Code>
      </div>
      <hr />
      <h2 className="black">分割线颜色</h2>
      <div className="flex items-center">
        <span className="flex items-center justify-center w50 h50 p10 bd1">
          分割
        </span>
        - #333 - <Code>border-color-base</Code>
      </div>
      <hr />
      <h2 className="black">模块背景颜色</h2>
      <div className="flex items-center">
        <div className="flex items-center justify-center w50 h50 bg-panel white">
          背景
        </div>
        - #1d1d1d - <Code>bg-panel</Code>
      </div>
      <div className="pt20 flex items-center">
        <div className="flex items-center justify-center w50 h50 bg-sider white">
          导航栏
        </div>
        - #2A2A2A - <Code>bg-sider</Code>
      </div>
      <div className="pt20 flex items-center">
        <div className="flex items-center justify-center w50 h50 bg-nav white">
          导航栏
        </div>
        - #323232 - <Code>bg-nav</Code>
      </div>
    </div>
  );
}
